<script>
export default {
  name: 'Turn',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    defaultChecked: {
      // 初始是否选中
      type: Boolean,
      default: false
    },
    checkedInfo: {
      // 选中时的内容
      type: [Number, String],
      default: null
    },
    uncheckedInfo: {
      // 未选中时的内容
      type: [Number, String],
      default: null
    },
    disabled: {
      // 是否禁用
      type: Boolean,
      default: false
    },
    checked: {
      // （v-model）指定当前是否选中
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      checkedVal: null
    }
  },
  watch: {
    checked() {
      this.initSwitcher()
    },
    defaultChecked() {
      this.initSwitcher()
    }
  },
  created() {
    this.initSwitcher()
  },
  methods: {
    initSwitcher() {
      if (typeof this.checked === 'boolean') {
        this.checkedVal = this.checked
      } else if (typeof this.checked === 'object') {
        this.checkedVal = this.defaultChecked
      }
    },
    onSwitch() {
      this.checkedVal = !this.checkedVal
      this.$emit('change', this.checkedVal)
      this.$emit('statusChanged')
    },
    handleStatusChange() {
      this.$emit('statusChanged')
    }
  }
}
</script>

<template>
  <view
    class="switch"
    :class="[checkedVal ? 'botton' : '']"
    @click="disabled ? (e) => e.preventDefault() : onSwitch()"
  >
    <svg class="switch-h" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <polyline points="12,1 12,10" />
        <circle
          fill="none"
          cx="12"
          cy="13"
          r="9"
          stroke-dasharray="49.48 7.07"
          stroke-dashoffset="10.6"
        />
      </g>
    </svg>
  </view>

  <!-- <div class="m-switch-wrap">
    <div
      @click="disabled ? (e) => e.preventDefault() : onSwitch()"
      :class="['m-switch', { 'switch-checked': checkedVal, disabled: disabled }]"
    >
      <div :class="['u-switch-inner', checkedVal ? 'inner-checked' : 'inner-unchecked']">{{
        checkedVal ? checkedInfo : uncheckedInfo
      }}</div>
      <div :class="['u-node', { 'node-checked': checkedVal }]"></div>
    </div>
  </div> -->
</template>

<style lang="scss" scoped>
$hue: 223;
$sat: 10%;
$hue2: 223;
$sat2: 90%;
$light2: 60%;
$primary: hsl($hue2, $sat2, $light2);
$trans-dur: 0.3s;
$trans-timing: ease-in-out;
$trans-timing2: cubic-bezier(0.42, -1.84, 0.42, 1.84);
$trans-timing3: cubic-bezier(0.42, 0, 0.42, 1.84);

.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130rpx;
  height: 130rpx;
  background: #ffffff;
  border-radius: 50%;
  background-color: transparent;
  background-image: linear-gradient(hsl($hue, $sat, 80%), hsl($hue, $sat, 85%));
  box-shadow: 0 0 0 0.125em hsla($hue2, $sat2, 50%, 0), 0 0 0.25em hsl($hue, $sat, 55%) inset,
    0 0.125em 0.125em hsl($hue, $sat, 90%);
  cursor: pointer;
  outline: transparent;
  position: relative;
  transition: box-shadow $trans-dur $trans-timing;
  -webkit-tap-highlight-color: transparent;
}

.switch:before {
  background-image: linear-gradient(hsl($hue, $sat, 90%), hsl($hue, $sat, 80%));
  box-shadow: 0 0.75em 0.75em 0.25em hsla($hue, 0%, 0%, 0.3);
  top: 20rpx;
  left: 20rpx;
  width: 90rpx;
  height: 90rpx;
  transition: box-shadow $trans-dur $trans-timing2, transform $trans-dur $trans-timing2;
}

.switch:after {
  background-color: hsl($hue, $sat, 75%);
  background-image: linear-gradient(hsla($hue, $sat, 90%, 0), hsl($hue, $sat, 90%));
  box-shadow: 0 0.0625em 0 hsl($hue, $sat, 90%) inset, 0 -0.0625em 0 hsl($hue, $sat, 90%) inset,
    0 0 0 0 hsla($hue2, $sat2, $light2, 0.1) inset;
  top: 35rpx;
  left: 35rpx;
  width: 60rpx;
  height: 60rpx;
  transition: background-color $trans-dur $trans-timing, box-shadow $trans-dur $trans-timing,
    transform $trans-dur $trans-timing2;
}

.switch:before,
.switch:after {
  border-radius: inherit;
  content: '';
  display: block;
  position: absolute;
}

.switch-h {
  position: absolute;
  top: calc(50% - 20rpx);
  left: calc(50% - 20rpx);
  width: 40rpx;
  height: 40rpx;
  transition: filter $trans-dur $trans-timing;
  z-index: 1;
}

.switch-h g {
  stroke: hsl($hue, $sat, 70%);
  transition: stroke $trans-dur $trans-timing;
}


.botton {
  &:before {
    box-shadow: 0 0.375em 0.375em 0 hsla($hue, 0%, 0%, 0.3);
    transition-timing-function: $trans-timing3;
  }

  &:before,
  &:after,
  .switch-h {
    transform: scale(0.98);
  }

  .switch-h {
    filter: drop-shadow(0 0 0.25em $primary);
  }

  .switch-h g {
    stroke: $primary;
  }

  &:after {
    background-color: hsl($hue, $sat, 90%);
    box-shadow: 0 0.0625em 0 hsla($hue2, $sat2, $light2, 0.5) inset,
      0 -0.0625em 0 hsla($hue2, $sat2, $light2, 0.5) inset,
      0 0 0.75em 0.25em hsla($hue2, $sat2, $light2, 0.1) inset;
    transition-timing-function: $trans-timing, $trans-timing, $trans-timing3;
  }
}

</style>